<template>
	<view class="public-category-hashtag">
		<view class="left">
			<view
				:class="listHover == index?'for hover':'for'"
				class="for"
				v-for="(item,index) in Item.list"
				@click="clickList(index)">
				<view v-if="listHover == index"></view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="right">
			<!-- 如果 有 自定义的话题 -->
			<view class="right-custom" v-if="listCustomHashtag.length">
				<view
					@click="$_To('hashtag/hashtag?hid='+item)"
					class="_for"
					v-for="(item,index) in listCustomHashtag">
					<text class="sort">{{index+1}}.</text>
					<text class="title">{{item}}</text>
				</view>
			</view>
			<!-- 如果 没有 自定义的话题 -->
			<view class="right-custom" v-else>
				<template v-if="listHashtagState == 'success'">
					<view
						@click="$_To('hashtag/hashtag?hid='+item.hid)"
						class="_for"
						v-for="(item,index) in listHashtag">
						<text class="sort">{{index+1}}.</text>
						<text class="title">{{item.hname}}</text>
						<text class="post-count">{{item.postCount}}帖</text>
					</view>
					<view class="more" @click="clickMore">点击加载更多</view>
				</template>
				<template v-if="listHashtagState == 'loading'">
					<view class="loading loading-css"></view>
					<view class="loading-position"></view>
					<view class="loading loading-css"></view>
					<view class="loading-position"></view>
					<view class="loading loading-css"></view>
					<view class="loading-position"></view>
					<view class="loading loading-css"></view>
					<view class="loading-position"></view>
					<view class="loading loading-css"></view>
				</template>
				<template v-if="listHashtagState == 'empty'">
					<public-empty></public-empty>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"public-category-hashtag",
		props:{
			Item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listHover:0,
				listCustomHashtag:[],
				listHashtag:[],
				listHashtagState:"loading",
				listHashtagPage:2,
			};
		},
		mounted(){
			this.getHashtagList();
		},
		methods: {
			clickList(index){
				this.listHover = index;
				this.listCustomHashtag = [];
				this.listHashtag = [];
				this.listHashtagState = "loading";
				this.getHashtagList(index)
			},
			getHashtagList(index){
				if(index == undefined){
					this.leftState = 0;
				}else{
					this.leftState = index; 
				}
				if(this.leftState){
					// 如果自定义话题列表有数据
					if(this.Item.list[this.leftState].custom.length){
						this.listCustomHashtag = this.Item.list[this.leftState].custom;
					}else{
						this.$_Request(
							"GET","/api/v2/hashtag/list",
							{
								"createdDays": this.Item.list[this.leftState].query.createdDays,
								"createdDate": this.Item.list[this.leftState].query.createdDate,
								"createdDateGt": this.Item.list[this.leftState].query.createdDateGt,
								"createdDateLt": this.Item.list[this.leftState].query.createdDateLt,
								"viewCountGt": this.Item.list[this.leftState].query.viewCountGt,
								"viewCountLt": this.Item.list[this.leftState].query.viewCountLt,
								"likeCountGt": this.Item.list[this.leftState].query.likeCountGt,
								"likeCountLt": this.Item.list[this.leftState].query.likeCountLt,
								"dislikeCountGt": this.Item.list[this.leftState].query.dislikeCountGt,
								"dislikeCountLt": this.Item.list[this.leftState].query.dislikeCountLt,
								"followCountGt": this.Item.list[this.leftState].query.followCountGt,
								"followCountLt": this.Item.list[this.leftState].query.followCountLt,
								"blockCountGt": this.Item.list[this.leftState].query.blockCountGt,
								"blockCountLt": this.Item.list[this.leftState].query.blockCountLt,
								"postCountGt": this.Item.list[this.leftState].query.postCountGt,
								"postCountLt": this.Item.list[this.leftState].query.postCountLt,
								"postDigestCountGt": this.Item.list[this.leftState].query.postDigestCountGt,
								"postDigestCountLt": this.Item.list[this.leftState].query.postDigestCountLt,
								"orderType": this.Item.list[this.leftState].query.orderType,
								"orderDirection": this.Item.list[this.leftState].query.orderDirection,
								"pageSize": this.Item.list[this.leftState].query.pageSize
							},
							(res) => {
								if(res.data.data.list.length){
									this.listHashtag = res.data.data.list;
									this.listHashtagState = "success"
								}else{
									this.listHashtagState = "empty"
								}
							}
						)
					}
				}else{
					// 如果自定义话题列表有数据
					if(this.Item.list[0].custom.length){
						this.listCustomHashtag = this.Item.list[0].custom;
					}else{
						this.$_Request(
							"GET","/api/v2/hashtag/list",
							{
								"createdDays": this.Item.list[0].query.createdDays,
								"createdDate": this.Item.list[0].query.createdDate,
								"createdDateGt": this.Item.list[0].query.createdDateGt,
								"createdDateLt": this.Item.list[0].query.createdDateLt,
								"viewCountGt": this.Item.list[0].query.viewCountGt,
								"viewCountLt": this.Item.list[0].query.viewCountLt,
								"likeCountGt": this.Item.list[0].query.likeCountGt,
								"likeCountLt": this.Item.list[0].query.likeCountLt,
								"dislikeCountGt": this.Item.list[0].query.dislikeCountGt,
								"dislikeCountLt": this.Item.list[0].query.dislikeCountLt,
								"followCountGt": this.Item.list[0].query.followCountGt,
								"followCountLt": this.Item.list[0].query.followCountLt,
								"blockCountGt": this.Item.list[0].query.blockCountGt,
								"blockCountLt": this.Item.list[0].query.blockCountLt,
								"postCountGt": this.Item.list[0].query.postCountGt,
								"postCountLt": this.Item.list[0].query.postCountLt,
								"postDigestCountGt": this.Item.list[0].query.postDigestCountGt,
								"postDigestCountLt": this.Item.list[0].query.postDigestCountLt,
								"orderType": this.Item.list[0].query.orderType,
								"orderDirection": this.Item.list[0].query.orderDirection,
								"pageSize": this.Item.list[0].query.pageSize
							},
							(res) => {
								if(res.data.data.list.length){
									this.listHashtag = res.data.data.list;
									this.listHashtagState = "success"
								}else{
									this.listHashtagState = "empty"
								}
							}
						)
					}
				}
			},
			clickMore(){
				uni.showLoading({ title: "加载中" });
				this.$_Request(
					"GET","/api/v2/hashtag/list",
					{
						"createdDays": this.Item.list[this.leftState].query.createdDays,
						"createdDate": this.Item.list[this.leftState].query.createdDate,
						"createdDateGt": this.Item.list[this.leftState].query.createdDateGt,
						"createdDateLt": this.Item.list[this.leftState].query.createdDateLt,
						"viewCountGt": this.Item.list[this.leftState].query.viewCountGt,
						"viewCountLt": this.Item.list[this.leftState].query.viewCountLt,
						"likeCountGt": this.Item.list[this.leftState].query.likeCountGt,
						"likeCountLt": this.Item.list[this.leftState].query.likeCountLt,
						"dislikeCountGt": this.Item.list[this.leftState].query.dislikeCountGt,
						"dislikeCountLt": this.Item.list[this.leftState].query.dislikeCountLt,
						"followCountGt": this.Item.list[this.leftState].query.followCountGt,
						"followCountLt": this.Item.list[this.leftState].query.followCountLt,
						"blockCountGt": this.Item.list[this.leftState].query.blockCountGt,
						"blockCountLt": this.Item.list[this.leftState].query.blockCountLt,
						"postCountGt": this.Item.list[this.leftState].query.postCountGt,
						"postCountLt": this.Item.list[this.leftState].query.postCountLt,
						"postDigestCountGt": this.Item.list[this.leftState].query.postDigestCountGt,
						"postDigestCountLt": this.Item.list[this.leftState].query.postDigestCountLt,
						"orderType": this.Item.list[this.leftState].query.orderType,
						"orderDirection": this.Item.list[this.leftState].query.orderDirection,
						"pageSize": this.Item.list[this.leftState].query.pageSize,
						"page":this.listHashtagPage
					},
					(res) => {
						if(res.data.data.list.length){
							this.listHashtag = this.listHashtag.concat(res.data.data.list);
							this.listHashtagPage++
							uni.hideLoading();
						}else{
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
.public-category-hashtag{
	display: flex;
	.left{
		width: 200rpx;
		background: $BeiJingSe;
		flex-shrink: 0;
		.for{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			line-height: 28rpx;
			height: 100rpx;
			text{
				font-size: 28rpx;
				padding: 0 15rpx;
			}
		}
		.hover{
			background: #FFF;
			view{
				width: 10rpx;
				height: 28rpx;
				background: $LanSe;
				position: absolute;
				left: 0;
				top: 36rpx;
			}
			text{
				font-weight: bold;
			}
		}
	}
	.right{
		flex: 1;
		.right-custom{
			._for{
				margin: 25rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid $BianKuangSe;
				padding-bottom: 25rpx;
				line-height: 32rpx;
				text{
					font-size: 32rpx;
				}
				.sort{
					color: $ZhanWeiSe;
					padding-right: 10rpx;
					flex-shrink: 0;
				}
				.title{
					flex: 1;
				}
				.post-count{
					font-size: 22rpx;
					color: $ZhanWeiSe;
				}
			}
			._for:nth-child(1){
				.sort{
					color: $LanSe;
				}
			}
			._for:nth-child(2){
				.sort{
					color: $HongSe;
				}
			}
			._for:nth-child(3){
				.sort{
					color: $JuHuang;
				}
			}
			._for:last-child{
				border-bottom: 0;
				margin-bottom: 0;
				padding-bottom: 0;
			}
			.loading{
				width: 100%;
				height: 32rpx;
				margin: 25rpx;
			}
			.loading-position{
				width: 100%;
				border-bottom: 1rpx solid $BianKuangSe;
				margin: 0 25rpx;
			}
			.more{
				font-size: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: $ZhanWeiSe;
				padding-bottom: 25rpx;
			}
		}
	}
}
</style>